<!--
  * @Description: 求职-注册
  * @Author: rcc
  * @Date: 2024-08-20 10:03:33
  * @FilePath: /rc-recruitment/pages/user/register/register.vue
-->

<template>
  <view class="page-view page-image">
    <RcNavigation title="企服联聘" bgColor="transparent" />

    <view class="flex-1" style="overflow: hidden;">
      <scroll-view scrollY="true" style="height: 100%;">
        <view class="flex m-h30 m-t50">
          <image class="h-110" src="@/static/images/public/logo.png" mode="heightFix" />
          <text class="m-l10 text-700-140">欢迎来到企服联聘</text>
        </view>

        <view class="m-h30 m-t30 p-h50 p-t30 p-b24 bg-1 r-32">
          <text class="text-700-132">注册账号</text>

          <view class="card flex">
            <image class="square-40 m-h30" src="@/static/images/public/phone.png" />
            <view class="line" />
            <text class="m-l24 text-700-130">+86</text>
            <input v-model="formData.phone" class="flex-1 p-h24" type="text" placeholder="手机号" />
          </view>
          <view class="card flex">
            <image class="square-40 m-h30" src="@/static/images/public/lock.png" />
            <view class="line" />
            <input v-model="formData.password" class="flex-1 p-h24" type="safe-password" password placeholder="请输入密码" />
          </view>
          <view class="card flex">
            <image class="square-40 m-h30" src="@/static/images/public/lock.png" />
            <view class="line" />
            <input v-model="formData.passwordVerify" class="flex-1 p-h24" type="safe-password" password
              placeholder="请再次输入密码" />
          </view>
          <view class="card flex">
            <image class="square-40 m-h30" src="@/static/images/public/safety.png" />
            <view class="line" />
            <input v-model="formData.code" class="flex-1 p-h24" type="text" placeholder="验证码" />
            <view class="send text-700-526" @click="sendCode(formData.phone, 2)">{{ codeText }}</view>
          </view>

          <RcButton :top="75" text="注册" @click="submit" />

          <view class="flex-c w m-t40" @click="selectPact">
            <view v-if="!formData.isCheck" class="choose" />
            <view v-else class="choose-el flex-c">
              <image class="w-20 h-14" src="@/static/images/user/select.png" />
            </view>
            <text class="m-l10 text-400-426">我已阅读<text class="text-400-526" @click="toPactPage">《用户协议》</text></text>
          </view>
        </view>

        <view class="flex-c m-t40">
          <text class="m-l10 text-700-428">已有账号？<text class="text-700-528" @click="clickBack">去登录</text></text>
        </view>

        <view class="flex-d-c m-t90 p-b20">
          <view class="icon-view flex-c">
            <image class="w-56 h-47" src="@/static/images/public/wechat.png" />
          </view>
          <text class="m-t20 text-400-424">第三方注册</text>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { onUnload } from '@dcloudio/uni-app'

import useCode from '@/hooks/use-code.ts'

import RcButton from '@/components/button.vue'
import RcNavigation from '@/components/navigation.vue'

const {
  codeText,
  sendCode,
  clearCodeTimer,
} = useCode()

const isDisabled = ref(false)

const formData = reactive({
  phone: '',
  password: '',
  passwordVerify: '',
  code: '',
  isCheck: false,
})

onUnload(() => {
  clearCodeTimer()
})

const selectPact = () => {
  formData.isCheck = !formData.isCheck
}

const formVerify = () => {
  if (isDisabled.value) return true

  if (formData.phone === '') {
    uni.$u.toast('请输入手机号')
    return true
  }

  if (formData.password === '') {
    uni.$u.toast('请输入密码')
    return true
  }

  if (formData.passwordVerify === '') {
    uni.$u.toast('请再次输入密码')
    return true
  }

  if (formData.password !== formData.passwordVerify) {
    uni.$u.toast('两次密码输入不一致')
    return true
  }

  if (formData.code === '') {
    uni.$u.toast('请输入验证码')
    return true
  }

  if (!formData.isCheck) {
    uni.$u.toast('请勾选用户协议')
    return true
  }

  return false
}

const submit = async () => {
  if (formVerify()) return

  isDisabled.value = true
  uni.showLoading({ title: '加载中...', mask: true })

  const data = {
    code: formData.code,
    mobile: formData.phone,
    password: formData.password,
    passwords: formData.passwordVerify,
  }

  const res = await uni.$u.post('/user/register', data)

  if (res.code === 1) {
    uni.showToast({ title: "注册成功" })
    uni.navigateBack()
  } else {
    uni.$u.toast(res.msg)
  }

  isDisabled.value = false
}

const toPactPage = () => {
  uni.navigateTo({ url: '/pages/user/pact/pact' })
}

const clickBack = () => {
  uni.navigateBack()
}
</script>

<style lang="scss">
page {
  background-color: $page-color-2;
}
</style>

<style lang="scss" scoped>
.page-view {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.page-image {
  height: 100%;
}

.card {
  width: 100%;
  height: 100rpx;
  margin-top: 30rpx;
  background: #F4F8FB;
  border-radius: 10rpx;

  .line {
    height: 64rpx;
    border-left: 1rpx solid $border-color-2;
  }

  .send {
    width: 180rpx;
    text-align: center;
    border-left: 1rpx solid $border-color-1;
  }
}

.choose {
  width: 26rpx;
  height: 26rpx;
  border-radius: 50%;
  border: 2rpx solid $border-color-5;
}

.choose-el {
  width: 26rpx;
  height: 26rpx;
  border-radius: 50%;
  background-color: $bg-color-2;
}

.icon-view {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  border: 1rpx solid $border-color-5;
}
</style>
